<template>
    <view class="article-main">
        <u-sticky :enable="enable">
            <view class="sticky">
                <u-row gutter="16" class="article-cate-list">
                    <u-col span="6" @click="change(item.id)" v-for="item in articleCateList" :key="item.id">
                        <view class="article-cate-list-item" :class="{ active: item.id === index }">{{ item.cate_name }}</view>
                    </u-col>
                </u-row>
            </view>
        </u-sticky>
        <view v-for="item in articleList" :key="item.id" @click="toArticleDetail(item.id)" class="article-list">
            <u-image width="180rpx" height="116rpx" v-if="item.article_logo" class="article-list-image" :src="item.article_logo"></u-image>
            <view class="u-line-1  article-list-title">
                {{ item.article_name }}
                <view class="article-list-title-time">
                    <u-icon name="clock"></u-icon>
                    {{ item.create_time }}
                </view>
            </view>
        </view>
        <u-back-top :scroll-top="scrollTop"></u-back-top>
        <u-divider margin-top="20" bg-color="#f3f4f6" margin-bottom="20" v-show="isBottom">{{ loadText }}</u-divider>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isBottom: false,
            loadText: '上拉加载更多',
            isGetMore: true,
            where: {},
            enable: true,
            scrollTop: 0,
            index: 0,
            articleList: [],
            articleCateList: [],
            limit: 10,
            page: 1
        };
    },
    methods: {
        toArticleDetail(id) {
            console.log(id);
            this.$u.route('/pages/articleDetail/articleDetail', {
                id
            });
        },
        change(index) {
            // 控制css
            this.index = index;
            // 更新条件
            this.where = {
                cate: Number(index)
            };
            // 解决BUG:如果一开始不切换到底触发事件后，page就是自增后的结果。所以要重置
            this.page = 1;
            this.getArticleList();
        },
        async getArticleList() {
            let r = await this.$u.api.getArticleList({ order: 'create_time', page: this.page, limit: this.limit, ...this.where });
            this.articleList = r.list;
        },
        async getArticleCate() {
            let r = await this.$u.api.getArticleCate({ limit: 2, cate_parent: 0 });
            this.articleCateList = r.list;
        },
        async getMore() {
            if (!this.isGetMore) return;
            let res = await this.$u.api.getArticleList({
                page: (this.page += 1),
                limit: this.limit,
                ...this.where
            });
            if (res.count === 0) {
                this.loadText = '实在没有了~';
                this.isGetMore = false;
                return;
            }
            this.articleList = [...this.articleList, ...res.list];
        }
    },
    mounted() {
        this.getArticleCate();
        this.getArticleList();
    },
    onReachBottom() {
        this.isBottom = true;
        this.getMore();
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    // 吸顶效果BUG修改
    onShow() {
        this.enable = true;
    },
    onHide() {
        this.enable = false;
    }
};
</script>

<style lang="scss" scoped>
.article-main {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #f3f4f6;
    padding-bottom: 20rpx;
    .sticky {
        height: 60rpx;
        @at-root .active {
            color: #19be6b;
            font-weight: bold;
        }
        .article-cate-list {
            background-color: #fff;
            .article-cate-list-item {
                text-align: center;
                line-height: 60rpx;
            }
        }
    }
    .article-list {
        padding: 30rpx;
        margin: 30rpx;
        background-color: #fafafa;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        /* .article-list-image {
            width: 180rpx;
            height: 116rpx;
        } */
        .article-list-title {
            color: #303133;
            width: 350rpx;
            font-size: 32rpx;
            .article-list-title-time {
                color: #c8c9cc;
                font-size: 24rpx;
                text-align: right;
                padding-right: 20rpx;
                padding-top: 20rpx;
                .u-icon {
                    padding-right: 8rpx;
                }
            }
        }
    }
}
</style>
